<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 引入分页插件所需的文件 -->
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./libs/jquery.twbsPagination.js"></script>
    <!-- 引入模板引擎js文件 -->
    <script src="./libs/template-web.js"></script>
    <!-- 引入地址js -->
    <script src="./js/http.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章列表
        </div>
        <div class="container-fluid common_con">
            <div class="row opt_btns">
                <div class="col-xs-6">
                    <form class="form-inline">
                        <select id="selCategory" name="" class="form-control input-sm">
                            <option value="">所有分类</option>
                            <option>未分类</option>
                            <option>奇趣事</option>
                            <option>会生活</option>
                            <option>爱旅行</option>
                        </select>
                        <select id="selStatus" name="" class="form-control input-sm">
                            <option value="">所有状态</option>
                            <option value="草稿">草稿</option>
                            <option value="已发布">已发布</option>
                        </select>
                        <button id="btnSearch" class="btn btn-default btn-sm">筛选</button>
                    </form>
                </div>
                <div class="col-xs-6">
                    <a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
                </div>
            </div>
            <table class="table table-striped table-bordered table-hover mp20">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>作者</th>
                        <th>分类</th>
                        <th class="text-center">发表时间</th>
                        <th class="text-center">状态</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>王积千造统最头</td>
                        <td>杰克</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-06-08 07:08:46</td>
                        <td class="text-center">已发布</td>
                        <td class="text-center">
                            <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:void(0);" class="btn btn-danger btn-xs delete">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="row text-center">
                <!-- 引入分页结构 -->
                <ul class="pagination" id="pagination"></ul>
                <!-- 当前页没有数据的情况下显示 -->
                <p>没有数据!</p>
            </div>
        </div>
    </div>

    <!-- 文章列表模板 -->

    <script id="articleList" type='text/html'>
        {{each data.data v}}
        <tr>
            <td>{{v.title}}</td>
            <td>{{v.author}}</td>
            <td>{{v.category}}</td>
            <td class="text-center">{{v.date}}</td>
            <td class="text-center">{{v.state}}</td>
            <td class="text-center">
                <a href="article_edit.html?id={{v.id}}" class="btn btn-default btn-xs">编辑</a>
                <a href="javascript:void(0);" data-id="{{v.id}}" class="btn btn-danger btn-xs delete">删除</a>
            </td>
        </tr>
        {{/each}}
    </script>
    <!-- 下拉菜单模板 -->

    <script id="optionList" type="text/html">
        <option value="">所有分类</option>
        {{each data v}}
        <!-- 将value设置成id值 方便后续发AJAX请求的时候利用id去识别分类 -->
        <option value="{{v.id}}">{{v.name}}</option>
        {{/each}}
    </script>

    <script>
        // 因原代码三次使用获取文章列表的请求 故封装成一个函后重新优化代码
        //--------优化代码------------------------------------------
        $(function () {
            //一:获取下拉菜单选项
            //获取所有下拉单分类
            $.ajax({
                url: BigNew.category_list,
                success: function (backData) {
                    // console.log(backData);
                    if (backData.code == 200) {
                        // 2.将返回的分类数据利用模板引擎渲染到页面
                        let resoption = template('optionList', backData);
                        $('#selCategory').html(resoption);

                    }
                }
            })
            //二:显示所有文章列表

            let mypage = 1;
            // 1.封装发出获取文章列表的请求
            function getList(mypage, callback) {
                //mypage是当前页数
                $.ajax({
                    url: BigNew.article_query,
                    // 实现下拉菜单选项与文章列表对应
                    data: {
                        // 注意:下拉菜单的val值就是被选中的option的value值 模板中将其设置为了id值
                        //根据选中的文章类别获取数据
                        type: $('#selCategory').val(),
                        //根据选中的文章发送状态获取数据
                        state: $('#selStatus').val(),
                        //page是当前页数
                        page: mypage,
                        perpage: 3,

                    },
                    success: function (backData) {
                        if (backData.code == 200) {
                            //2.将返回的文章列表利用模板引擎显示到页面中
                            let res = template('articleList', backData);
                            $('tbody').html(res);
                            //3.做额外的事情
                            if (callback != null && backData.data.data.length != 0) {
                                callback(backData);
                                $('#pagination').show().next('p').hide();
                            } else if (backData.data.data.length == 0 && mypage == 1) {
                                $('#pagination').hide().next('p').show();
                            } else if (backData.data.data.length == 0 && mypage - 1 == backData.data
                                .totalPage) {
                                mypage -= 1;
                                $('#pagination').twbsPagination(
                                    'changeTotalPages', backData
                                    .data.totalPage, mypage)

                                // callback(backData)
                            }
                        }

                    }
                });
            }

            // 2.调用封装的函数

            // 2.1第一次,发送获取文章列表的ajax请求:获取所有文章列表
            getList(mypage, function (backData) {
                // console.log(backData);
                //额外需要做的事情:写入分页插件
                $('#pagination').twbsPagination({
                    totalPages: backData.data.totalPage,
                    visiblePages: 5,
                    first: '首页',
                    prev: '上一页',
                    next: '下一页',
                    last: '尾页',
                    onPageClick: function (event, page) {
                        //2.2 第二次,发送获取文章列表的ajax请求:
                        //根据点击获得的页码 发送请求获得文章列表
                        //将点击时的页码数赋值给全局的mypage 方便删除时显示当前电点击页
                        mypage = page;
                        getList(page, null);
                    }
                })


            });
            // 三:设置筛选按钮注册事件
            // 通过筛选按钮再次发送ajax请求获取用户选中的下拉菜单选项
            //注意:因为ajax只执行一次 上面取所有文章列表的ajax请求只执行一次 无法再根据用户后面选中的下拉单选项去发出请求 所以要设置筛选按钮用于再次发送anjax请求
            $('#btnSearch').on('click', function (e) {
                //如果不阻止 我们自己定义的筛选按钮任务无法触发 
                e.preventDefault();
                // 第三次,发送获取文章列表的ajax请求:
                // 根据筛选条件获得对应的文章列表
                // 因筛选后页数变更 所有需要重绘页码条 更新总页码数
                //changeTotalPages参数是pagination文件中找到的
                //第一个参数:方法名字
                //第二个参数:新想页码
                //第三个参数:当前的页码数
                //重绘后当前显示的页码数是1
                getList(mypage, function (backData) {
                    mypage = 1;
                    $('#pagination').twbsPagination('changeTotalPages', backData
                        .data.totalPage, mypage)
                })
            });
            //四:删除文章列表
            //注意:这里删除按钮是动态获得的 所以要用委托事件
            $('tbody').on('click', '.delete', function () {
                if (confirm('确定删除吗')) {
                    let listId = $(this).attr('data-id');
                    $.ajax({
                        type: 'post',
                        url: BigNew.article_delete,
                        data: {
                            id: listId
                        },
                        success: function (backData) {
                            // console.log(backData);
                            if (backData.code == 204) {
                                alert(backData.msg)
                                //删除文章后数据变化需要重绘页码条 需要在回调函数中执行
                                //在删除11页中的文章时总页数可能发生变化 总页数需要重构 但页码仍显示在11页
                                getList(mypage, function (backData) {
                                    // console.log(backData);
                                    $('#pagination').twbsPagination(
                                        'changeTotalPages', backData
                                        .data.totalPage, mypage)
                                });

                            }
                        }
                    })
                }
            })
            //五:点击右上角按钮跳转到发表文章网页 并右边高亮
            $('#release_btn').on('click', function () {
                // 设置父窗口高亮 当前页面时子窗口 要打开父窗口需要使用parent
                parent.$('.level02 li:eq(1)').click();
            })


        })




        //--------原代码----------------------------------------------------------------------
        // 入口函数
        // $(function () {
        // // 一:获取下拉菜单选项
        // // 1.获取所有下拉单分类
        // $.ajax({
        //     url: BigNew.category_list,
        //     success: function (backData) {
        //         // console.log(backData);
        //         if (backData.code == 200) {
        //             // 2.将返回的分类数据利用模板引擎渲染到页面
        //             let resoption = template('optionList', backData);
        //             $('#selCategory').html(resoption);

        //         }
        //     }
        // })
        // //  二:显示所有文章列表
        // // 1.第一次,发送获取文章列表的ajax请求:
        // // 获取所有文章列表
        // $.ajax({
        //     url: BigNew.article_query,
        //     // 实现下拉菜单选项与文章列表对应
        //     data: {
        //         // 注意:下拉菜单的val值就是被选中的option的value值 模板中将其设置为了id值
        //         //根据选中的文章类别获取数据
        //         type: $('#selCategory').val(),
        //         //根据选中的文章发送状态获取数据
        //         state: $('#selStatus').val(),
        //         page: 1,
        //         perpage: 3,

        //     },
        //     success: function (backData) {
        //         // console.log(backData);
        //         if (backData.code == 200) {
        //             //2.将返回的文章列表利用模板引擎显示到页面中
        //             let res = template('articleList', backData);
        //             $('tbody').html(res);
        //             // 3.写入分页插件
        //             $('#pagination').twbsPagination({
        //                 totalPages: backData.data.totalPage,
        //                 visiblePages: 5,
        //                 first: '首页',
        //                 prev: '上一页',
        //                 next: '下一页',
        //                 last: '尾页',
        //                 onPageClick: function (event, page) {
        //                     // 第二次,发送获取文章列表的ajax请求:
        //                     //根据点击获得的页码 发送请求获得文章列表
        //                     $.ajax({
        //                         url: BigNew.article_query,
        //                         // 实现下拉菜单选项与文章列表对应
        //                         data: {
        //                             // 注意:下拉菜单的val值就是被选中的option的value值 模板中将其设置为了id值
        //                             //根据选中的文章类别获取数据
        //                             type: $('#selCategory').val(),
        //                             //根据选中的文章发送状态获取数据
        //                             state: $('#selStatus').val(),
        //                             page: page,
        //                             perpage: 3
        //                         },
        //                         success: function (backData) {
        //                             // console.log(backData);
        //                             if (backData.code == 200) {
        //                                 //2.将返回的文章列表利用模板引擎显示到页面中
        //                                 let res = template(
        //                                     'articleList', backData);
        //                                 $('tbody').html(res);
        //                             }

        //                         }
        //                     })


        //                 }
        //             })
        //         }

        //     }
        // });
        //     // 三:设置筛选按钮注册事件
        //     // 通过筛选按钮再次发送ajax请求获取用户选中的下拉菜单选项
        //     //注意:因为ajax只执行一次 上面取所有文章列表的ajax请求只执行一次 无法再根据用户后面选中的下拉单选项去发出请求 所以要设置筛选按钮用于再次发送anjax请求
        //     $('#btnSearch').on('click', function (e) {
        //         //如果不阻止 我们自己定义的筛选按钮任务无法触发 
        //         e.preventDefault();
        //         // 第三次,发送获取文章列表的ajax请求:
        //         // 根据筛选条件获得文章列表

        //         $.ajax({
        //             url: BigNew.article_query,
        //             // 实现下拉菜单选项与文章列表对应
        //             data: {
        //                 // 注意:下拉菜单的val值就是被选中的option的value值 模板中将其设置为了id值
        //                 //根据选中的文章类别获取数据
        //                 type: $('#selCategory').val(),
        //                 //根据选中的文章发送状态获取数据
        //                 state: $('#selStatus').val(),
        //                 page: 1,
        //                 perpage: 3
        //             },
        //             success: function (backData) {
        //                 // console.log(backData);
        //                 if (backData.code == 200) {
        //                     //2.将返回的文章列表利用模板引擎显示到页面中
        //                     let res = template('articleList', backData);
        //                     $('tbody').html(res);
        //                     // 4.重绘页码条
        //                     // 因筛选后页数变更 所有需要重绘页码条 更新总页码数
        //                     //changeTotalPages参数是pagination文件中找到的
        //                     //第一个参数:方法名字
        //                     //第二个参数:新想页码
        //                     //第三个参数:当前的页码数
        //                     //重绘后当前显示的页码数是1
        //                     $('#pagination').twbsPagination('changeTotalPages', backData
        //                         .data.totalPage, 1)
        //                 }

        //             }
        //         })
        //     })


        // })
    </script>
</body>

</html>